<template>
  <div class="h-full flex p-4">
    <div class="flex flex-col pr-4 w-1/2">
      <div class="flex-1 h-0">
        <BasicTable @register="registerTable" />
      </div>
      <div class="h-4 shrink-0"></div>
      <div class="flex-1 h-0">
        <BasicTable @register="registerTable" />
      </div>
    </div>
    <div class="flex-1 flex flex-col w-1/2 h-full">
      <div class="h-1/3 mb-4">
        <BasicTable @register="registerTable" />
      </div>
      <div class="h-1/3 mb-4">
        <BasicTable @register="registerTable2" />
      </div>
      <div class="h-1/3">
        <BasicTable @register="registerTable1" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';
  import { getBasicColumns, getFormConfig } from './tableData';

  import { demoListApi } from '@/api/demo/table';

  const [registerTable] = useTable({
    api: demoListApi,
    columns: getBasicColumns(),
    useSearchForm: false,
    formConfig: getFormConfig(),
    showTableSetting: false,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    isCanResizeParent: true,
    rowKey: 'id',
  });

  const [registerTable1] = useTable({
    api: demoListApi,
    columns: getBasicColumns(),
    formConfig: getFormConfig(),
    showTableSetting: false,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    isCanResizeParent: true,
    useSearchForm: false,
    rowKey: 'id',
  });

  const [registerTable2] = useTable({
    api: demoListApi,
    columns: getBasicColumns(),
    formConfig: getFormConfig(),
    showTableSetting: false,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    isCanResizeParent: true,
    useSearchForm: false,
    pagination: false,
    rowKey: 'id',
  });
</script>
